<template>
    <div class="digbox" v-if="diogShow">
        <div class="beijing" :style="{ width: width, height: height }">
            <div class="titles">
                <div class="title-name">{{ title }}</div>
                <div class="title-options">
                    <div v-for="item in propOption" :key="item.name" class="option-item" :style="{color:activeName==item.value?'#FFF400':'#D8FFFE'}" @click="optionClick(item)">{{ item.name }}</div>
                    <el-date-picker
                        v-if="times"
                        v-model="value1"
                        size="small"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        @change="timeChange"
                        placeholder="选择日期">
                    </el-date-picker>
                </div>
                <div class="dig-close" @click="$emit('closeHandler',false)"><img src="../assets/closeIcon.png" alt=""></div>
            </div>
            <div class="bodys"><slot name="bodys"></slot></div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        width: {
            type: String,
            default: "70%"
        },
        height: {
            type: String,
            default: "85%"
        },
        title: {
            type: String,
            default: "标题"
        },
        propOption: {
            type: Array,
            default:()=>{return []} 
        },
        diogShow:{
            type:Boolean,
            default:false,  
        },
        times:{
            type:Boolean,
            default:false,  
        },
        propValue:{
            type: String,
            default: ""
        },
    },
    data() {
        return {
            activeName:"" ,
            value1:""
        }
    },
    watch:{
        diogShow:function(value){
            if(!value)this.activeName =""
        }
    },
    methods: {
        optionClick(item){
            if(this.activeName == item.value){
                this.activeName =""
            }else{
                this.activeName = item.value
            }
            this.$emit('propChange',this.activeName)
        },
        timeChange(){
            let startTime = ""
            let endTime = ""
            if(this.value1!=null){
                startTime = this.value1[0]
                endTime = this.value1[1]
            }
            this.activeName=""
            this.$emit('timeChange',{startTime,endTime})
        }
    },
}
</script>
<style lang="less" scoped>
.digbox {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;

    .beijing {
        background-image: url('../assets/digBox.png');
        background-size: 100% 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 40px;
        display: flex;
        flex-direction: column;
        .titles {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            .title-options {
                flex: 1;
                display: flex;
                align-items: center;
                gap: 15px;
                .option-item{
                     width: 90px;
                     height: 30px;
                     background-image: url('../assets/button.png');
                     background-size: 100% 100%;
                     text-align: center;
                     line-height: 30px;
                     font-size: 14px;
                    font-weight: 500;
                    cursor: pointer;
                }
            }
            .title-name {
                width: 160px;
                height: 30px;
                background: linear-gradient(101deg, #17372F 0%, #17372F 1%, #4BC8A9 50%, #17372F 100%);
                border: 1px solid;
                border-image: linear-gradient(-82deg, #63FFD7, #63FFD7, #37A084, #B6FFEC) 1 1;
                border-radius: 1px;
                font-size: 18px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
                line-height: 30px;
                text-align: center;
                margin-right: 60px;
            }
            .dig-close {
                width: 20px;
                height: 20px;
                margin-left: 20px;
                cursor: pointer;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .bodys{
            width: 100%;
            flex: 1;
            overflow-y: auto;
        }
    }
}
/deep/.el-input__inner{
    width: 257px;
    height: 30px;
    background: linear-gradient(0deg, rgba(0,224,219,0.4) 0%, rgba(0,224,219,0.4) 0%, rgba(0,224,219,0.4) 0%, rgba(0,224,219,0) 50%, rgba(0,224,219,0.4) 100%);
    border: 1px solid #1EC0BB;
    border-radius: 4px;
}
/deep/.el-range-separator{
    color: #fff;
    text-align: left;
}
/deep/.el-range-input{
    color: #fff;
    background: linear-gradient(0deg, rgba(0,224,219,0.4) 0%, rgba(0,224,219,0.4) 0%, rgba(0,224,219,0.4) 0%, rgba(0,224,219,0) 50%, rgba(0,224,219,0.4) 100%);
}
.bodys::-webkit-scrollbar{
  background-color: rgba(82,184,112,0.2);
  width: 3px;
}
.bodys::-webkit-scrollbar-button{
  display: none;
}
.bodys::-webkit-scrollbar-thumb{
  background-color: rgba(82,184,112,1);
  border-radius: 20px;
}
</style>